<template>
  <div class="box">
    <el-card v-loading="loading" class="tree-card" element-loading-background="rgba(0, 0, 0, 0.8)" element-loading-text="拼命加载中">
      <!-- 用了一个行列布局 -->
      <TreeTools is-title :data="{name:'传智教育',manager:'负责人'}" @addDept="handleAddDept('')" />
      <el-tree :data="depts" :props="{label:'name'}" default-expand-all node-key="id">
        <template #default="{data}">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
          <TreeTools :data="data" @delDept="delDeptFn" @addDept="handleAddDept(data.id)" @editDept="handleEditDept(data)" />
        </template>
      </el-tree>
    </el-card>
    <addDept :pid="pid" :raw-depts="rawDepts" :simple-employe-list="simpleEmployeList" :dialog-visible="dialogVisible" :title="title" @close="dialogVisible=false" @update="getDepartmentList" />
  </div>
</template>

<script>
import addDept from './components/add-dept.vue'
import { getDepartmentList, delDepartment, getEmployeeSimple } from '@/api/department'
import TreeTools from './components/tree-tools.vue'
import { list2Tree } from '@/utils/'
// import { title } from '@/settings'

export default {
  name: 'DepartmentPage',
  components: {
    TreeTools,
    addDept
  },
  data() {
    return {
      depts: [],
      loading: true,
      dialogVisible: false,
      rawDepts: [], // 原始数据
      pid: '',
      simpleEmployeList: [],
      title: ''
    }
  },
  created() {
    this.getDepartmentList()
  },

  methods: {
    async getDepartmentList() {
      const res = await getDepartmentList()
      this.rawDepts = res.depts // 把原始数据备份一下
      console.log(res)
      this.depts = list2Tree(res.depts, '')
      this.loading = false
    },
    async delDeptFn(id) {
      try {
        await this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await delDepartment(id)
        // 删除成功说明数据变旧了，所以要重新拿一次数据
        this.getDepartmentList()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    async handleAddDept(id) {
      this.title = '新增部门'

      this.pid = id
      this.simpleEmployeList = await getEmployeeSimple()
      this.$children[1].form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      this.dialogVisible = true
    },
    async handleEditDept(data) {
      this.title = '编辑部门'
      this.dialogVisible = true
      this.pid = data.pid // 财务核算部，但是我们要找的是财务部，也就是把我们财务核算部的pid传过去
      // $parent,$children,$ref 对props,$emit一个补充 ，父子通信的一个思路， 补充写法
      // 因为表格上的数据不能和回显数据是同一份，不然改回显数据时，都不用点确认，表格上的会立马同步
      this.$children[1].form = { ...data }
      // 部门负责人里的seleact选择器数据
      this.simpleEmployeList = await getEmployeeSimple()
    }
  }
}
</script>

<style scoped lang='scss'>
.box{
  padding:14px;
}
.tree-card {
  padding: 30px ;
  font-size:14px;
  min-height:400px;
}
</style>
